<template>
  <div class="pageBox">
    <head-component title="提交订单"></head-component>
    <div class="addressBox flex-between">
      <div class="address flex-row">
        <img class="dizhi_icn" src="@/image/home/dizhi_icn.png" alt="" />
        <div class="addr">
          <div class="addrTop flex-row">
            <p>牛小胜</p>
            <span>183 6417 8929</span>
          </div>
          <div class="addrBom">山东省临沂市兰山区蒙山大道238号某某小区</div>
        </div>
      </div>
      <img
        class="youjiantou2_btn"
        src="@/image/home/youjiantou2_btn.png"
        alt=""
      />
    </div>

    <div class="goodsInfoBox">
      <div class="popupTop flex">
        <img class="popupTopImg" src="../../image/home/banner.png" alt="" />
        <div class="popupRight flex-center">
          <p>￥39.9</p>
          <span>小怡室集 衣物留香珠220g</span>
          <div class="sku flex">
            <div class="skuItem">规格：L</div>
            <div class="skuItem">颜色：红色</div>
          </div>
        </div>
      </div>

      <div class="stepBox flex-between">
        <p>购买数量</p>
        <van-stepper v-model="stepValue" />
      </div>

      <div class="payWay flex-between">
        <p>支付方式</p>
        <span>微信支付 </span>
      </div>

      <div class="totalBox flex-row">
        <p>共1件商品，合计</p>
        <span>￥39.90</span>
      </div>
    </div>

    <div class="bottom flex-between">
      <div class="totalBox2 flex-row">
        <p>共1件商品，</p>
        <p>合计：</p>
        <span>￥39.90</span>
      </div>
      <button class="buy" @click="onBuy">立即购买</button>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, ref } from "vue";
import headComponent from "../../components/headComponent.vue";
import router from "../../router";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    const stepValue = ref(1); // 步进器

    function onBuy() {
      router.push("/paySuccess");
    }

    return {
      stepValue,
      onBuy,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  padding-top: 88px;
  background-color: #f5f5f5;
  padding-bottom: 88px;
  .addressBox {
    margin-top: 20px;
    padding: 50px 30px;
    background-color: #fff;
    .address {
      .dizhi_icn {
        width: 61px;
        height: 73px;
      }
      .addr {
        padding-left: 12px;
        .addrTop {
          p {
            font-size: 36px;
            font-weight: 500;
            color: #2e3033;
            margin-right: 20px;
          }
          span {
            font-size: 30px;
            font-weight: 400;
            color: #999999;
          }
        }
        .addrBom {
          font-size: 26px;
          font-weight: 400;
          color: #999999;
          margin-top: 10px;
        }
      }
    }
    .youjiantou2_btn {
      width: 36px;
      height: 36px;
    }
  }
  .goodsInfoBox {
    margin-top: 20px;
    background-color: #fff;
    padding: 40px 30px;
    .popupTop {
      width: 100%;
      .popupTopImg {
        width: 180px;
        height: 180px;
        border-radius: 16px;
      }
      .popupRight {
        padding-left: 20px;
        flex-direction: column;
        p {
          width: 100%;
          font-size: 36px;
          font-weight: 500;
          color: #e00b12;
          margin-bottom: 10px;
        }
        span {
          width: 100%;
          font-size: 28px;
          font-weight: 400;
          color: #333333;
        }
        .sku {
          width: 100%;
          flex-wrap: wrap;
          justify-content: flex-start;
          margin-top: 10px;
          .skuItem {
            font-size: 26px;
            font-weight: 400;
            color: #999999;
            margin-right: 50px;
          }
        }
      }
    }
    .stepBox {
      margin-top: 37px;
      p {
        font-size: 26px;
        font-weight: 400;
        color: #666666;
      }
    }
    .payWay {
      margin-top: 38px;
      p {
        font-size: 26px;
        font-weight: 400;
        color: #666666;
      }
      span {
        font-size: 26px;
        font-weight: 400;
        color: #333333;
      }
    }
    .totalBox {
      margin-top: 60px;
      justify-content: flex-end;
      p {
        font-size: 26px;
        font-weight: 400;
        color: #999999;
      }
      span {
        font-size: 26px;
        font-weight: 400;
        color: #e00b12;
      }
    }
  }
  .bottom {
    width: 100%;
    height: 88px;
    background: #ffffff;
    box-shadow: 0px -1px 0px 0px #dadee6;
    position: fixed;
    left: 0;
    bottom: 0;
    .totalBox2 {
      justify-content: flex-end;
      padding-left: 30px;
      p:nth-of-type(1) {
        font-size: 26px;
        font-weight: 400;
        color: #999999;
      }
      p:nth-of-type(2) {
        font-size: 26px;
        font-weight: 400;
        color: #333333;
      }
      span {
        font-size: 26px;
        font-weight: 400;
        color: #e00b12;
      }
    }
    .buy {
      width: 220px;
      height: 88px;
      background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
      font-size: 28px;
      font-weight: 500;
      color: #ffffff;
      border: none;
    }
  }
}
</style>